<template>
  <div id="app">
    <!-- 房子名称 -->
    <div>
      <van-nav-bar
        :title="this.houseData.community"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
    </div>
    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in this.houseData.houseImg"
          :key="index"
        >
          <img :src="url + item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="about">
      <!-- 详细信息 -->
      <div class="t">
        <van-card :title="this.houseData.title">
          <template #tags>
            <van-tag plain type="danger" class="tag">进地铁</van-tag>
          </template>
        </van-card>
      </div>
      <!-- 租金 -->
      <div class="money">
        <van-grid :column-num="3">
          <van-grid-item>
            <div class="money1">
              <span>{{ this.houseData.price }}</span
              >/月
            </div>
            <div class="money2">租金</div>
          </van-grid-item>
        </van-grid>
        <van-grid :column-num="3">
          <van-grid-item>
            <div class="money1">
              <span>{{ this.houseData.roomType }}</span>
            </div>
            <div class="money2">房型</div>
          </van-grid-item>
        </van-grid>
        <van-grid :column-num="3">
          <van-grid-item>
            <div class="money1">
              <span>{{ this.houseData.size }}</span
              >平米
            </div>
            <div class="money2">面积</div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 说明 -->
      <div class="shuoming">
        <div class="s1">
          <div>装修:<span>精装</span></div>
          <div>
            楼层:<span>{{ this.houseData.floor }}</span>
          </div>
        </div>
        <div>
          <div>
            朝向:<span
              v-for="(item, index) in this.houseData.oriented"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <div>类型:<span>普通住宅</span></div>
        </div>
      </div>
    </div>
    <div class="gelitiao"></div>
    <!-- 地图 -->
    <div class="Map">
      <div class="name">小区:<span>天山星城</span></div>
      <div class="mapMask">
        <baidu-map
          :zoom="zoom"
          :center="center"
          :scroll-wheel-zoom="true"
          class="mapMask"
          ak="YxXNc3f8NsL4Ws6QtRzrY1F9jCXYfycn"
        ></baidu-map>
      </div>
    </div>
    <!-- 房屋配套 -->
    <div class="house">
      <div class="house1">房屋配置</div>
      <div class="housestyle">
        <van-grid :column-num="5">
          <van-grid-item
            v-for="(value, index) in houseIconList"
            :key="index"
            :icon="value.icon"
            :text="value.name"
          />
        </van-grid>
      </div>
    </div>
    <!-- 房源概况 -->
    <div class="houseSupply">
      <div class="house1">房源概况</div>
      <!-- 用户信息 -->
      <van-cell center title="张三" label="已认证房主">
        <template #icon>
          <img
            src="https://api-haoke-web.itheima.net/img/avatar.png"
            alt=""
            icon="star-o"
            class="avatar"
          />
        </template>
        <template #default>
          <div>
            <van-button type="info" size="mini" color="#21b97a" plain
              >发消息</van-button
            >
          </div>
        </template>
      </van-cell>
      <div class="houseask">
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="duyoulike">
      <div class="house1">猜你喜欢</div>
      <!-- 猜你喜欢列表 -->
      <div>
        <van-card
          price="4500元/月"
          desc="100㎡/南 北/低楼层"
          title="可可西里 3室1厅"
          thumb="http://liufusong.top:8080/img/message/1.png"
        >
          <template #tags>
            <van-tag plain type="danger">随时看房</van-tag>
          </template>
        </van-card>
      </div>
      <div>
        <van-card
          price="4500元/月"
          desc="100㎡/南 北/低楼层"
          title="可可西里 3室1厅"
          thumb="http://liufusong.top:8080/img/message/2.png"
        >
          <template #tags>
            <van-tag plain type="danger">随时看房</van-tag>
            <van-tag plain type="danger">地铁</van-tag>
          </template>
        </van-card>
      </div>
      <div>
        <van-card
          price="4500元/月"
          desc="100㎡/南 北/低楼层"
          title="可可西里 3室1厅"
          thumb="http://liufusong.top:8080/img/message/3.png"
        >
          <template #tags>
            <van-tag plain type="danger">可看房</van-tag>
            <van-tag plain type="danger">交通便利</van-tag>
          </template>
        </van-card>
      </div>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <div class="eareConfirm">
        <!-- <van-button icon="plus" type="primary">按钮</van-button> -->
        <button class="concel" v-if="shows" @click="likeFn(true)">
          <van-icon name="star-o" />
          收藏
        </button>
        <button class="concel" v-else @click="likeFn(false)" >
          <van-icon name="star" color="#21b97a" />
          收藏
        </button>
        <button class="concel" @click="ask">
          <van-icon name="service" />在线咨询</button
        ><button class="confirm" @click="phine">
          <van-icon name="phone" />电话预约
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { housexiAPI, addFavoritesAPI, delFavoritesAPI } from '@/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      center: {
        lng: '',
        lat: ''
      },
      zoom: 1,
      houseData: [],
      tags: [],
      url: 'http://liufusong.top:8080',
      shows: null,
      iconList: [
        { icon: 'balance-list-o', name: '衣柜' },
        { icon: 'shop-o', name: '洗衣机' },
        { icon: 'desktop-o', name: '空调' },
        { icon: 'fire-o', name: '天然气' },
        { icon: 'hotel-o', name: '冰箱' },
        { icon: 'chart-trending-o', name: '暖气' },
        { icon: 'tv-o', name: '电视' }
      ]
    }
  },
  async created () {
    const res = await housexiAPI(this.$route.query.id)
    this.houseData = res.data.body
    this.tags = res.data.body.tags
    this.center.lng = this.houseData.coord.latitude
    this.center.lat = this.houseData.coord.longitude
    console.log(this.houseData)
  },
  methods: {
    onClickLeft () {
      // Toast('返回')
      this.$router.replace({
        path: 'layout/search'
      })
    },
    // 收藏
    async likeFn (shows) {
      // this.shows = !shows
      if (shows === true) {
        console.log('收藏')
        this.shows = true
        await addFavoritesAPI(
          {
            id: this.$route.query.id,
            authorization: localStorage.getItem('token')
          },
          Toast('已添加至收藏列表')
        )
      } else {
        this.shows = false
        await delFavoritesAPI(
          {
            id: this.$route.query.id,
            authorization: localStorage.getItem('token')
          },
          Toast('已取消收藏')
        )
      }
    },
    // 在线咨询
    ask () {},
    // 电话预约
    phine () {}
  },
  computed: {
    // 筛选房屋配置
    houseIconList () {
      return (
        this.iconList.filter((item) =>
          this.houseData.supporting.includes(item.name)
        ) || []
      )
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  position: relative;
}
.active {
  color: #21b97a;
}
img {
  width: 100%;
  // height: 5.2rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  margin-top: 40px;
  font-size: 11.53333rem;
  line-height: 100px;
  text-align: center;
  background-color: #39a9ed;
}
.about {
  padding: 0px 16px 20px;
}
.t {
  border-bottom: #e8e8e8 solid 2px;
}
.t .van-card {
  padding: 15px 0 5px;
}
.t .van-card__content {
  min-height: 1.5rem;
}
.tag {
  margin-top: 5px;
}
.van-tag--danger.van-tag--plain {
  color: #6ecad4;
  background-color: #e1f5f8;
}
/* 详情 */
.money {
  display: flex;
}
.money1 {
  width: 100px;
  text-align: center;
  margin-top: -10px;
  color: #fa5741;
  font-size: 18px;
}
.money1 span {
  color: #fa5741;
  font-size: 18px;
  font-weight: bolder;
  height: 26px;
  line-height: 26px;
}
.money2 {
  box-sizing: border-box;
  height: 26px;
  margin-top: -5px;
  line-height: 26px;
  font-size: 14px;
}
// 说明
.shuoming {
  display: flex;
  font-size: 13px;
  color: #999;
  padding-right: 5px;
  line-height: 26px;
  margin-top: 15px;
}
.shuoming span {
  margin-left: 12px;
  color: black;
  font-size: 12px;
}
.s1 {
  margin-right: 100px;
}
.gelitiao {
  height: 7px;
  background-color: #f8f9f9;
}
// 地图模块
.Map {
  // background-color: #fa5741;
  margin-top: 10px;
}
.name {
  font-size: 13px;
  padding: 10px 15px;
}
.mapMask {
  width: 100%;
  height: 145px;
  background-color: #39a9ed;
}
// 房屋配套
.house1 {
  font-size: 13px;
  padding: 12px 0;
  color: black;
  font-weight: 800;
  border-bottom: rgb(218, 208, 208) solid 1px;
}
.houseSupply {
  padding: 0 10px;
}
// 房源概况
.houseask {
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 5px;
  color: #333;
}
// 用户信息
.van-cell {
  padding: 5px 0px;
  &::after {
    display: none;
  }
}
.van-cell__label {
  font-size: 12px;
  color: #fa5741;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f8f8f8;
  margin-right: 5px;
  border: none;
}
// 发消息按钮
.van-button__content {
  width: 60px;
}
// 房屋介绍
.houseask span {
  line-height: 1.6;
  font-size: 14px;
  padding: 10px;
  color: #333;
}
// 猜你喜欢
.duyoulike {
  margin-bottom: 50px;
  padding: 0px 10px;
}
.van-card {
  padding: 13px 0;
  border-bottom: #999 solid 0.5px;
}
.van-card__price {
  font-size: 10px;
  color: #fa5741;
}
.van-card__price-integer {
  font-size: 15px;
}
// 底部栏固定按钮
.eareConfirm {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 45px;
  z-index: 100000;
  display: flex;
  font-size: 15px;
  color: #fff;
  .confirm {
    width: 33%;
    background-color: #21b97a;
    border: none;
  }
  .concel {
    flex: 1;
    width: 33%;
    border: none;
    border: #e8e8e8 solid 1px;
    background-color: #fff;
    color: #999999;
  }
}
</style>
